<template>
	<div>
		<el-button v-if="flag" type="primary" @click="handleAdd()">新增</el-button>
		<br />
		<el-form ref="form" label-width="120px">
			<el-row :gutter="20" v-for="v in curData" :key="v.id">
				<el-form-item :label="v.label">
					<el-col :span="$route.meta.scopeType == 1 ? 16 : 4">
						<!-- <UEditor
						  v-if="v.code == 'copyright'"
						  :ref="'input' + v.id"
						  :defaultMsg="v.value"
						/> -->
						<el-input :ref="'input' + v.id" v-if="v.type == 1" v-model.trim="v.value" maxlength="50" show-word-limit></el-input>
						<img class="show-img" v-if="v.type == 2" :src="v.hasOwnProperty('sysAttachment') ? v.sysAttachment.httpUrl : defaultImg" alt="" />
						<span class="color-danger" v-if="v.des">{{ v.des }}</span>
					</el-col>
					<el-col :span="8">
						<el-button @click="handleSave(v)" title="保存" v-if="flag || v.type == 1" type="primary" plain>保存</el-button>
						<el-button @click="handleDelete(v)" title="删除" v-if="flag" plain>删除</el-button>
						<el-button @click="handleEdit(v)" title="修改" type="primary" v-if="flag || v.type == 2" plain>上传</el-button>
					</el-col>
				</el-form-item>
				<div style="height: 1px; width: 80%; border-top: 1px dashed #eee; margin-bottom: 20px"></div>
			</el-row>
		</el-form>
	</div>
</template>
<script>
import { sysBaseInfoQuery, sysBaseInfoDelete, sysBaseInfoUpdate } from '@/api/admin/system/sysBaseInfo.js';
import Bus from '@/utils/bus.js';
import webinfo from '@/mixins/webinfo.js';
export default {
	mixins: [webinfo],
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 99
			},
			tableData: [],
			curData: []
		};
	},
	watch: {
		type: {
			immediate: true,
			handler() {
				this.getList();
			}
		}
	},
	props: ['flag', 'type'],
	mounted() {
		this.$store.dispatch('setwebinfo');
		Bus.$on('refreshWebBaseList', (v) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			this.getList();
		});
	},
	beforeDestroy() {
		Bus.$off('refreshWebBaseList');
	},
	methods: {
		getList() {
			sysBaseInfoQuery(this.listQuery).then((res) => {
				this.tableData = res.data.data;
				this.$store.commit('SETWEBINFO', JSON.parse(JSON.stringify(this.tableData)));
				this.curData = this.tableData.filter((v) => v.scopeType == this.type);
			});
		},
		handleAdd() {
			Bus.$emit('showDialogWebBaseAdd');
		},
		handleSave(v) {
			let value = '';
			value = this.$refs['input' + v.id][0].value;
			sysBaseInfoUpdate({ id: v.id, value: value }).then((res) => {
				if (v.code == 'webName') {
					document.title = v.value;
					// this.$store.dispatch('setwebinfo');
				}
				this.getList();
				this.$message({
					message: '操作成功',
					type: 'success'
				});
			});
		},
		handleEdit(v) {
			Bus.$emit('showDialogWebBaseAdd', v);
		},
		//删除确认
		handleDelete(row) {
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.delete(row);
				})
				.catch(() => {});
		},
		//删除
		delete(row) {
			sysBaseInfoDelete(row.id).then((res) => {
				this.getList();
				this.$message({
					message: '操作成功',
					type: 'success'
				});
			});
		}
	}
};
</script>
<style scoped lang="scss">
.show-img {
	max-height: 80px;
	width: auto;
	float: left;
	margin-right: 20px;
	// display: block;
	// padding: 2px;
	border: 1px solid #dcdfe6;
	background: url('../../../../assets/opacity.png') repeat;
	background-size: 10px;
}
</style>
